import React, { useState, useEffect } from 'react';
import './Header.css';
import ProductManage from './ProductManage';
import { Modal, Button, Input, message } from 'antd';

const AppHeader = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [password, setPassword] = useState('');
  const username = '王昱涵';

  useEffect(() => {
    // 检查localStorage中的登录状态
    const loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
    if (loginInfo && loginInfo.expiry > Date.now()) {
      setIsLoggedIn(true);
    } else {
      setShowLoginModal(true);
    }
  }, []);

  const handleLogin = () => {
    if (password === 'yoyo1234') {
      const expiry = Date.now() + 24 * 60 * 60 * 1000; // 24小时后过期
      localStorage.setItem('loginInfo', JSON.stringify({ username, expiry }));
      setIsLoggedIn(true);
      setShowLoginModal(false);
      setPassword(''); // 新增：登录成功后清除密码
      message.success('登录成功');
    } else {
      message.error('密码错误');
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('loginInfo');
    setIsLoggedIn(false);
    setShowLoginModal(true);
    message.success('已退出登录');
  };

  return (
    <div className="app-header">
      <div className='hd-inner'>
        <div className="hd-left center">
          <div className="title">
            小猫咪超市
          </div>
        </div>
        <div className="hd-right center">
          {isLoggedIn && <ProductManage />}
          {isLoggedIn ? (
            <>
              <div className="title" style={{ marginLeft: 20 }}>
                {username}
              </div>
              <Button
                type="primary"
                danger
                size="middle"
                onClick={handleLogout}
                style={{ 
                  marginLeft: 20,
                  borderRadius: 4,
                  boxShadow: '0 2px 0 rgba(255, 38, 5, 0.06)'
                }}
              >
                退出登录
              </Button>
            </>
          ) : null}
        </div>
      </div>

      <Modal
        title="系统登录"
        open={showLoginModal}
        onOk={handleLogin}
        onCancel={() => {}}
        closable={false}
        footer={null}
        centered
        width={400}
      >
        <div style={{ padding: '24px 0', textAlign: 'center' }}>
          <div style={{ marginBottom: 32 }}>
            <h2 style={{ marginBottom: 8 }}>欢迎回来</h2>
            <p style={{ color: '#666' }}>请输入您的密码登录系统</p>
          </div>
          
          <div style={{ marginBottom: 24 }}>
            <div style={{ 
              marginBottom: 16,
              padding: '8px 16px',
              backgroundColor: '#f5f5f5',
              borderRadius: 4,
              textAlign: 'left'
            }}>
              <div style={{ fontSize: 12, color: '#888' }}>用户名</div>
              <div style={{ fontWeight: 'bold' }}>{username}</div>
            </div>
            
            <Input.Password
              placeholder="请输入密码"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              onPressEnter={handleLogin}
              size="large"
              style={{ 
                width: '100%',
                marginBottom: 24
              }}
            />
          </div>

          <Button
            type="primary"
            size="large"
            onClick={handleLogin}
            style={{ 
              width: '100%',
              height: 48,
              fontSize: 16,
              fontWeight: 'bold'
            }}
          >
            登 录
          </Button>
        </div>
      </Modal>
    </div>
  );
};

export default AppHeader;